<!--
 * @Author: Hzt
 * @Date: 2024-06-30 11:49:25
 * @LastEditTime: 2024-06-30 22:33:18
 * @LastEditors: Hzt
 * @Description: 
 * @FilePath: \cty_admin\src\views\application\myapp\index.vue
-->
<template>
  <div class="main-page device-brand">
    <div class="application-box">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item v-show="isNull == false" label="appid">
          <el-input v-model="form.appId" type="number" disabled></el-input>
        </el-form-item>
        <el-form-item v-show="isNull == false" label="secret" prop="secret">
          <el-input v-model="form.secret"></el-input>
        </el-form-item>
        <el-form-item>
          <p v-if="isNull == true">
            您还未申请应用,去申请
          </p>
          <el-button type="primary" @click="onSubmit('form')">
            {{ isNull == false ?'修改':'申请' }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getMyApp,apply,modify } from "@/api/application";
export default {
    name: "Myapp",
    components: {
    },
    data() {
        return {
          form: {
            appId:'',
            secret:'',
          },
          appData:null,
          isNull:true,
          rules:{
            secret:[  
              { required: true, message: '请输入secret', trigger: 'blur' },
              { min:32,max: 32, message: '长度只能是32位', trigger: 'blur'},
              { validator: this.validateNotChinese, trigger: 'blur' }
            ]
          }
        };
    },
    mounted(){
      this.getMyAppMethod()
    },
    methods: {
      onSubmit(form) {
        if(this.isNull == true){
          apply().then(res=>{
            console.log(res);
            if(res.code == 200){
              this.$message({
                message: '申请成功',
                type: 'success'
              });
              this.getMyAppMethod();
            }
          }).catch(err=>{console.log(err)})
        } else {
          this.$refs[form].validate((valid) => {
          if (valid) {
            modify(this.form).then(res=>{
            if(res.code === 200){
              this.$message({
                message: '修改成功',
                type: 'success'
              });
            this.getMyAppMethod();
            }
          }).catch(err=>{console.log(err)})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
         
        }
      },
      validateNotChinese (rule, value, callback) {
        const chineseRegex = /[\u4e00-\u9fa5]/; 
        if (chineseRegex.test(value)) {
          callback(new Error('输入内容不能包含中文字符'));
        } else {
          callback();
        }
      },
      getMyAppMethod(){
        getMyApp().then(res=>{
          if(res.code === 200){
            this.appData = res.data;
            if(this.appData === null){
              this.isNull = true;
            } else {
              this.isNull = false;
              this.form = res.data;
            }
          }
        }).catch(err=>{
          console.log(err)
        })
      },
    },
};
</script>
<style scoped>
.application-box{
  padding-top: 20px;
}
</style>
